<template>
  <div>
    <Header />
    <div class="paytop"><van-icon name="arrow-left" />确认订单</div>
    <div class="paytopnext">
      <div>送货上门</div>
    </div>
    <router-link to="/addressadd" class="address">
      <div class="addressLeft">送货地址</div>
      <div class="addressCenter"></div>
      <div class="addressRight"><van-icon name="arrow" /></div>
    </router-link>
    <div class="paylist">
      <div
        class="paylistbox"
        v-for="item in allRes.allcheckedcart"
        :key="item.id"
      >
        <div class="paybox">
          <div class="paylistimg">
            <img :src="item.listImgs[0].listImgpath" alt="" />
          </div>
          <div class="paylistright">
            <p>{{ item.proSeries }}</p>
            <h1>{{ item.displayName }}</h1>
            <p>数量：{{ item.numb }}</p>
            <p>￥ {{ item.proPrice }}</p>
          </div>
        </div>

        <addpaycart :getdate="[item.proNum, item.numb]"></addpaycart>
      </div>
    </div>

    <div class="info">
      <div class="infobox infoOne">
        <span>赠品</span><span>玫瑰系列 - 经典-首饰盒-红色</span>
      </div>
      <div class="infobox infoTwo">
        <span>支付方式</span> <span>在线支付</span>
      </div>
      <div class="infobox infoThree">
        <span>请选择优惠卷</span> <span><van-icon name="arrow" /></span>
      </div>
      <div class="infobox infoFour">
        <span>礼品卡</span> <span><van-icon name="arrow" /> </span>
      </div>
    </div>
    <div class="payfooter">
      <van-submit-bar
        :price="allRes.allprice"
        button-text="提交订单"
        text-align="left"
        label="实付款："
        button-color="#b42c25"
        @submit="goperson"
      />
      <i>免运费</i>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import { mapGetters } from "vuex";
import addpaycart from "../components/addpaycart.vue";
export default {
  components: {
    Header,
    addpaycart,
  },

  computed: {
    ...mapGetters({
      allRes: "cartlist/allRes",
    }),
  },
  methods: {
    // 以上组件的内容
    goperson() {
      this.$router.push("/");
    },
  },
};
</script>

<style src="../assets/css/payCart.css" scoped>
</style>